<template>
    <!--base.vue 作为基准页 进行开发-->
    <div>
        <fixed-bar :breadCrumbs="breadCrumbs"></fixed-bar>
        <div class="tool-box">
            <div class="tool-box-left">

                <div class="fbutton">
                    <div class="add" title="添加商品">
                        <span><i class="fa fa-plus"></i>添加商品</span>
                    </div>
                </div>

                <div class="fbutton">
                    <div class="add" title="初始化商品搜索关键词">
                        <span><i class="fa fa-plus"></i>初始化商品搜索关键词</span>
                    </div>
                </div>


            </div>
            <div class="tool-box-right">

                <select class="select">
                    <option value="">所有分类</option>
                </select>
                <select class="select">
                    <option value="">所有品牌</option>
                </select>
                <select class="select">
                    <option value="">全部</option>
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                </select>
                <select class="select">
                    <option value="0">全部</option>
                    <option value="is_new">新品</option>
                    <option value="is_recommend">推荐</option>
                </select>
                <input type="button" class="btn" value="搜索">

            </div>
        </div>
        <div class="table-box">
            <table class="layui-hide" id="test"></table>
        </div>
    </div>
</template>

<script>

    let breadCrumbs = {
        title: {
            h3: "添加学员",
            h5: "添加需要做作业的学生帐号密码",
            childrenBar: []
        },
        prompt: [
            "就算是帐户没钱也给添加学员",
            "添加学员后,要自动生成报告()",
            "跨期人数,当前添加的名单,能做的,跨越2个学期,",
            "添加次数,每一次的添加认为是一次添加",
            "添加人数,当次添加的人数",
            "院校种类,当次添加的有几个院校",
            "未识别,当次添加有几个学生没识别出院校的",
            "添加日期,当次的添加日期",
            "添加次数,添加人数,院校种类(几个院校),未识别,添加日期,报告清单,"
        ]
    };

    export default {
        data() {
            return {
                breadCrumbs,
            }
        },
        beforeCreate() {

        },
        mounted() {

            this.$nextTick(res => {

                layui.use('table', function () {
                    var table = layui.table;

                    table.render({
                        elem: '#test',
                        page: true,
                        cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        cols: [[{type: 'checkbox'},
                            {field: 'id', title: 'ID', sort: true},
                            {field: 'username', title: '用户名'},
                            {field: 'sex', title: '性别', sort: true},
                            {field: 'city', title: '城市'},
                            {field: 'sign', title: '签名',}, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                            {field: 'experience', title: '积分', sort: true},
                            {field: 'score', title: '评分', sort: true},
                            {field: 'classify', title: '职业'},
                            {field: 'wealth', title: '财富', sort: true},
                        ]],
                        data: [
                            {"id": "10002"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                            {"id": "333"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                            {"id": "444"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                            {"id": "55"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                            {"id": "66"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                            {"id": "1007701"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                            {"id": "8"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                            {"id": "9"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"}, {"id": "10001"},
                        ]
                    });
                });


            })


        }

    }
</script>

<style lang="scss">
    @import "../../scss/toolbox";

</style>
